<template>
	<div id="scrollTop" class="hidden-xs">
		<transition name = "fade">
	        <span v-show="show" id="gotop1">
				<img src="../assets/img/huojian.svg">
			</span>
		</transition>
    </div>
</template>

<script>

export default {
	data() {
		return {
			show: false,
		}
	},
	mounted: function() {
		this.goTop()
		// 监听滚动
		window.addEventListener('scroll', this.handleScroll)
	},
	methods: {
		// 返回顶部
		goTop: function() {
			$("#gotop1").click(function(e) {
				TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut})
				var huojian = new TimelineLite()
				huojian
					.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease:  Power4.easeOut})
					.to("#gotop1", 1, {y:-1000, opacity:0, ease:  Power4.easeOut}, 0.6)
				huojian.eventCallback("onComplete", function() {
					// 动画播完后等待淡出动画播完重新设置位置并将火箭隐藏
					huojian.set("#gotop1", {y:0, rotationY:0, scale:1, clearProps: "all"})
					$("#gotop1").hide()
				})
			})
		},
		handleScroll: function() {
			let scrolling = $(window).scrollTop()
			if (scrolling > 420) {
				this.show = true
			} else {
				this.show = false
			}
			
		}

		
	}
}
</script>